<template>
  <div id="FormApproval">

    <el-steps direction="vertical" :active="hisFormDataList.length" align-center>
      <el-step v-for="(item,index) in hisFormDataList" :key="index">

        <template slot="title">
          <div style="font-size: 14px;">
            <span v-if="item.nodeType=='EndEvent'">{{item.nodeName}}</span>
            <span v-else>
              {{item.creator}}【{{item.nodeName}}】
              <span>
                <span style="margin-left: 10px;">{{item.createTime}}</span>
                <!--表单状态-->
                <span style="margin-left: 10px;">
                  <span v-if="item.nodeType=='StartEvent'"></span>
                  <span v-else>
                    <span style='color: red;' v-if="item.approval==0">审批拒绝</span>
                    <span v-else>审批通过</span>
                  </span>
                </span>
              </span>
            </span>
          </div>
        </template>

        <template slot="description">
          <div :id="index" style="margin: 20px 0;"></div>
        </template>
      </el-step>
    </el-steps>

    <el-divider v-if="hisFormDataList&&hisFormDataList.length>0&&isHisTask==0"/>

    <form-create
        v-if="isHisTask==0"
        v-model="fApi"
        :rule="rule"
        :option="option"
        style="margin-left: 35px;"
    />

  </div>
</template>

<script>
  import formCreate from "@form-create/element-ui";
  import {queryFormKeyList, queryFormKeyListByProcInstId, selectFormById, completeTask} from './api/dynamicApi'

  export default {
    name:'TmptDynamicFormApproval',
    props:{
      taskId: String,
      isHisTask: Number  // 1,0
    },
    data () {
      return {
        form:{},
        dynamicFormIdList:[],
        dynamicFormId:'',
        // 当前
        fApi: null,
        rule:[],
        option:{},
        hisFormDataList:[]
      }
    },
    watch:{
      'taskId': {
        immediate: true, // vue首次赋值不触发watch的解决方法
        handler: function(nval){
          this.initUI()
        }
      },
    },
    mounted() {
    },
    methods: {
      async initUI() {
        console.log("this.taskId")
        console.log(this.taskId)

        const result = await queryFormKeyList({"taskId":this.taskId, "isHisTask":this.isHisTask});
        this.hisFormDataList = result.list
        const curFormKey = result.remark
        for (let i=0;i<this.hisFormDataList.length;i++) {
          let hisFormData = this.hisFormDataList[i]
          await this.initHisFormSheet(hisFormData, i);
        }

        // 当前的表单， 历史任务就是已完成的任务
        if (this.isHisTask==0) {
          await this.initCurFormSheet(curFormKey);
        }
      },
      async initCurFormSheet(curFormKey) {
        const result = await selectFormById({"id":curFormKey})
        if (!result.success) {
          // 可能id不存在
          //this.notify(result)
          return
        }
        this.rule = formCreate.parseJson(result.obj.rule)
        this.option = formCreate.parseJson(result.obj.option)
      },

      // 通过 dynamicFormId 自动加载新的表单页面
      async initHisFormSheet(hisFormData, i) {
        if(document.getElementById(i))document.getElementById(i).innerHTML=''
        const dynamicFormId = hisFormData.ttfFormId
        if (!dynamicFormId) return

        const dataJson = hisFormData.dataJson
        const result = await selectFormById({"id":dynamicFormId})
        if (!result.success) {
          this.notify(result)
          return
        }
        const rules = formCreate.parseJson(result.obj.rule)
        const options = formCreate.parseJson(result.obj.option)
        const {$f,mount,remove,destroy} = formCreate.init(rules,options)
        await mount(document.getElementById(i))
        await $f.setValue(JSON.parse(dataJson))
        const fields = await $f.fields()
        await $f.disabled(true)
        for (let i=0;i<fields.length;i++) {
          const fieldName = fields[i]
          await $f.sync(fieldName)
        }

      },
      handleApprovePass() {
        const task = {}
        task.id = this.taskId
        task.approval = 1
        task.formData = JSON.stringify(this.fApi.form)
        //可以加变量
        //task.formData = {}
        completeTask(task).then(r => {
          this.notify(r)
          if (r.success) {
            //this.list()
          }
        })
      },
      handleApproveFail() {
        const task = {}
        task.id = this.taskId
        task.approval = 0
        task.formData = JSON.stringify(this.fApi.form)
        //可以加变量
        //task.formData = {}
        completeTask(task).then(r => {
          this.notify(r)
          if (r.success) {
            //this.list()
          }
        })
      }

    }
  }
</script>
<style>
  #FormApproval {
    padding-right: 20px;
  }
  #FormApproval .el-step__description {
    padding-right: 0 !important;
  }
</style>